<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 基本的输入框组</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<!--通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。-->
		<div class="input-group input-group-sm">
			<span class="input-group-addon">
				<span class="glyphicon glyphicon-user"></span>
			</span>
			<input type="text" class="form-control" placeholder="twitterhandle">
		</div>
		<br>
		<div class="input-group">
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
		<br>
		<div class="input-group">
			<span class="input-group-addon">$</span>
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
		<p>可以把复选框和单选插件作为输入框组的前缀或者后缀元素</p>
		<div class="row">
			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-addon">
						<input type="checkbox">
					</span>
					<input type="text" class="form-control">
				</div><!-- /input-group -->
			</div><!-- /.col-lg-6 --><br>
			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-addon">
						<input type="radio">
					</span>
					<input type="text" class="form-control">
				</div><!-- /input-group -->
			</div><!-- /.col-lg-6 -->
		</div>
		
		<p>按钮插件</p>
		<!--需要使用 class .input-group-btn 来包裹按钮。-->
		<div class="row">
			<div class="col-lg-3">
				<div class="input-group">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">
							Go!
						</button>
					</span>
					<input type="text" class="form-control">
				</div><!-- /input-group -->
			</div><!-- /.col-lg-6 --><br>
			<div class="col-lg-3">
				<div class="input-group">
					<input type="text" class="form-control">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">
							Go!
						</button>
					</span>
				</div><!-- /input-group -->
			</div><!-- /.col-lg-6 -->
			<div class="col-lg-3">
				<div class="input-group">
					<input type="text" class="form-control">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							下拉菜单 2
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#">功能</a></li>
							<li><a href="#">另一个功能</a></li>
							<li><a href="#">其他</a></li>
							<li class="divider"></li>
							<li><a href="#">分离的链接</a></li>
						</ul>
					</div><!-- /btn-group -->
				</div><!-- /input-group -->
			</div><!-- /.col-lg-3 -->
			<!--分割的下拉菜单-->
			<div class="col-lg-3">
				<div class="input-group">
					<input type="text" class="form-control">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#">功能</a></li>
							<li><a href="#">另一个功能</a></li>
							<li><a href="#">其他</a></li>
							<li class="divider"></li>
							<li><a href="#">分离的链接</a></li>
						</ul>
					</div><!-- /btn-group -->
				</div><!-- /input-group -->
			</div><!-- /.col-lg-3 -->
		</div><!-- /.row -->
		
	</form>
</div>

</body>
</html>